import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [//routes表示多个路由(作用是根据不同的的视图路径加载不同的视图组件<加载不同的页面>)
  {
    path: '/', //路径
    name: 'home', //视图组件的名称
    component: HomeView  ,//路径对应的视图组件(路径对应的页面)
    redirect: "/index",
    children: [
      {
        path: '/reg',
        name: 'reg',
        component: () => import( '../views/home/RegView.vue')
      },
      {
        path: '/login',
        name: 'login',
        component: () => import( '../views/home/LoginView.vue')
      },
      {
        path: '/index',
        name: 'index',
        component: () => import( '../views/home/IndexView.vue')
      },
      {
        path: '/list',
        name: 'list',
        component: () => import( '../views/home/ListView.vue')
      },
      {
        path: '/detail',
        name: 'detail',
        component: () => import( '../views/home/DetailView.vue')
      },
      {
        path: '/personal',
        name: 'personal',
        component: () => import( '../views/home/PersonalView.vue'),
        children:[
          {
            path: 'index', //不写/表示/personal/index路径就会执行PersonalIndexView.vue
            name: 'personalIndex',
            component: ()=> import('../views/home/personal/PersonalIndexView.vue')
          },
          {
            path: 'management', //不写/表示/personal/index路径就会执行PersonalIndexView.vue
            name: 'PersonalManagementView',
            component: ()=> import('../views/home/personal/PersonalManagementView.vue')
          },
          {
            path: 'post', //不写/表示/personal/index路径就会执行PersonalIndexView.vue
            name: 'PersonalPostView',
            component: ()=> import('../views/home/personal/PersonalPostView.vue')
          }

        ]
      }
    ]
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import( '../views/AdminView.vue'),
    //视图组件：  用 "()=>import()"  动态导入一个视图组件
    redirect: '/admin/user',//表示如果给/admin发请求时，会跳转到/admin/index页面
    children: [
      {//注意:  path不要加/。
        // children表示多个子路由，子路由的path表示子路由的路径，子路由的component表示子路由对应的视图组件
        path: "user",
        component: ()=> import('../views/admin/AdminIndexView.vue')
      },
      {
        path: "banner",
        component: ()=> import('../views/admin/AdminBannerView.vue')
      },
      {
        path: "content",
        component: ()=> import('../views/admin/AdminContentView.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    //视图组件：  用 "()=>import()"  动态导入一个视图组件
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
